<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        div{
            width: 100px;height: 100px;background:deepskyblue;
            border:1px solid #333;position:absolute;left:0;top:0;
            cursor:move;text-align:center;line-height:100px;
        }
    </style>
</head>
<body>
<div id="div1">
    倾城
</div>

<script type="text/javascript">

    window.onload = function(){
        var oDiv = document.getElementById("div1")
        oDiv.onmousedown = function(ev){
            var oEvent = ev || event;
            var x = oEvent.clientX - oDiv.offsetLeft;
            var y = oEvent.clientY - oDiv.offsetTop;
            document.onmousemove = function(ev){
                var oEvent = ev || event;
                var left = oEvent.clientX-x;
                var top = oEvent.clientY-y;
                oDiv.style.left = left + "px";
                oDiv.style.top = top + "px";
            }
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
            return false;
        }
    }

















</script>

</body>
</html>